How to overlay one div over another div?
How to overlay one div over another div?
130
31-Jul-2023
Updated on 01-Aug-2023
Aryan Kumar
01-Aug-2023To overlay one div over another div, you can use the following CSS properties:
position
: This property determines how an element is positioned relative to its parent element. The two most common values for this property areabsolute
andrelative
.z-index
: This property determines the stacking order of elements. An element with a higher z-index will appear in front of an element with a lower z-index.For example, the following CSS code will overlay a div with the class
overlay
over a div with the classcontainer
:CSS
The
container
div will be positioned relative to its parent element, while theoverlay
div will be positioned absolutely. This means that theoverlay
div will be positioned relative to thecontainer
div, and will appear in front of it.You can also use the
top
andleft
properties to position theoverlay
div relative to thecontainer
div. For example, the following CSS code will position theoverlay
div 100px from the top and 100px from the left of thecontainer
div:CSS